<template>
  <div >
    <p class="title">页面浏览量</p>
    <div class="form_search">
      <el-form>
        <div class="createTime timePicker" style="width: 100%">
          <el-input v-model="form.local_time.value" placeholder="日期"></el-input>
          <el-date-picker   @change="changeTime"   v-model="timePicker" :pickerOptions="pickerOptions"
            type="daterange" range-separator="至"   prefix-icon="0" start-placeholder="开始日期"  
          :value-format="timeFormat" end-placeholder="结束日期" placeholder="选择日期"></el-date-picker>
        </div>
      </el-form>
      <div class="form_btn">
        <el-button type="search" icon="iconfont icon-search_normal" @click="getData"></el-button>
        <el-button  icon="iconfont icon-Refresh" @click="resetForm"></el-button>
      </div>
    </div>
    <el-table :data="list" :height="chartsH+'px'" ref="table">
      <el-table-column  label="日期" sortable  prop="local_time" ></el-table-column>
      <el-table-column  label="页面名称"  prop="uri" align="left" width="240"></el-table-column>
      <el-table-column  label="浏览量" width="100" sortable prop="page_view"></el-table-column>
      <el-table-column  label="占比率" width="100" sortable prop="rate" >
        <template slot-scope="scope">
           <p>{{scope.row.rate}}%</p>
         </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { viewViist } from '@/api/kanban/index.js'
import { setSearchParams, setPickerOptions, timeFormat, timeTransfor } from '@/utils/index.js'
export default {
  data () {
    return {
      list: [],
      form: {
        local_time:  { value: '', op: 'RANGE' },
      },
      timePicker: '',
      timeFormat: 'yyyy-MM-dd',
      pickerOptions: setPickerOptions(),
      chartsH: ''
    }
  },
  props: ['show'],
  watch: {
    show: function() {
      if(this.show) {
        this.getData()
        this.setHeight()
      }
    }
  },
  created () {
    this.setDateCur()

  },
  mounted () {
    this.setHeight()
  },
  methods: {
    setHeight () { //图表高度
      this.$nextTick(()=>{ 
        let dom = document.getElementsByClassName("kanban_views")[0].offsetHeight
        let title = document.getElementsByClassName("kanban_views")[0].getElementsByClassName('views_right')[0].getElementsByClassName('title')[0].offsetHeight
        let form =  document.getElementsByClassName("kanban_views")[0].getElementsByClassName('views_right')[0].getElementsByClassName('form_search')[0].offsetHeight
        this.chartsH = dom - title - form - 32 - 33
      })
    },
    setDateCur() {  // 初始化设置默认日期 当天
      let date = timeFormat(new Date()).split(' ')[0]
      this.timePicker = [date, date]
      let obj = timeTransfor(this.timePicker,  '日')
      this.form.local_time.value = obj.start_date + ' - '+ obj.end_date
      this.start_date = obj.start_date
      this.end_date =  obj.end_date  
      this.getData()
    },
    changeTime (arr) {
      console.log(arr)
      if(arr) {
        this.form.local_time.value = arr[0] + ' - '+ arr[1]
      } else {
        this.form.local_time.value  = null
        this.timePicker = null
      }
      this.getData()
    },
    getData() {
      let params = setSearchParams(this.form)
      viewViist(params).then(res=>{
        if(res.state == 1) {
          let data = res.data
          for(let i = 0; i < data.length; i++ ){
            data[i].page_view = parseInt(data[i].page_view)
          }

          this.list = data
        }
      })
    },
    // 重置按钮
    resetForm(){
      for(let item in this.form){
        this.form[item].value =""
      }
      this.setDateCur()
      this.getData()
    },
  }

}
</script>

<style>

</style>